<!--
 * @Author: wangmingshuo
 * @Date: 2020-06-10 16:31:34
 * @LastEditTime: 2020-06-10 16:32:30
 * @FilePath: /myLittleNest/layouts/error.vue
-->
<template>
	<div>
		<canvas id="canvas"></canvas>
	</div>
</template>

<script>
export default {
	props: {},
	data() {
		return {};
	},
	computed: {},
	created() {},
	mounted() {
		var text_arr = ['啊哦~你想找的内容离你而去了哦', 'Not Found', '404', '找不到页面']; //显示文字
		var text_num = 50; //页面要显示的文字个数
		var word_arr = []; //储存文字坐标等属性的数组
		var txt_min_size = 10; //文字最小大小
		var txt_max_size = 50; //文字最大大小
		var keypress = false; //默认键盘未点击状态，点击键盘实现加速效果
		var acclerate = 3; //点击键盘加速速率
		var w = window.innerWidth;
		var h = window.innerHeight;
		var canvas = document.getElementById('canvas');
		canvas.width = w;
		canvas.height = h;
		var ctx = canvas.getContext('2d');

		window.addEventListener(
			'keydown',
			function () {
				keypress = true;
			},
			true
		);
		window.addEventListener(
			'keyup',
			function () {
				keypress = false;
			},
			true
		);

		//生成一个随机随
		function random(min, max) {
			return Math.random() * (max - min + 1) + min;
		}
		//实现不同大小文字的移动速度不同
		//out_min 最小速度
		//out_max 最大速度
		function range_map(value, in_min, in_max, out_min, out_max) {
			return ((value - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
		}

		// 返回一个数的平方根
		function distance(x, y, x1, y1) {
			// sqrt() 方法可返回一个数的平方根。
			// a² + b² = c²
			return Math.sqrt((x1 - x) * (x1 - x) + (y1 - y) * (y1 - y));
		}
		// 储存文字坐标位置
		function saveText() {
			for (let i = 0; i < text_num; i++) {
				let t = {
					x: random(0, w),
					y: random(0, h),
					text: text_arr[~~random(0, text_arr.length)],
					size: ~~random(txt_min_size, txt_max_size),
				};
				word_arr.push(t);
			}
		}

		// 在canvas绘制文字移动效果
		function draw() {
			ctx.clearRect(0, 0, w, h);
			let r = Math.floor(Math.random() * 255);
			let g = Math.floor(Math.random() * 255);
			let b = Math.floor(Math.random() * 255);
			let color = 'rgba(' + r + ',' + g + ',' + b + ',0.8)';

			ctx.fillStyle = '#fff';
			for (let i = 0; i < word_arr.length; i++) {
				//文字大小，样式
				ctx.font = word_arr[i].size + 'px sans-serif';
				// word_arr[i].color = color;
				//文字宽度
				var t_w = ctx.measureText(word_arr[i].text);
				ctx.fillText(word_arr[i].text, word_arr[i].x, word_arr[i].y);
				if (keypress) {
					word_arr[i].x += range_map(word_arr[i].size, txt_min_size, txt_max_size, 2, 4) * acclerate;
				} else {
					word_arr[i].x += range_map(word_arr[i].size, txt_min_size, txt_max_size, 2, 3);
				}
				//如果大于窗口宽度，那么重新返回，并且随机y轴位置和大小
				if (word_arr[i].x >= w) {
					word_arr[i].x = -t_w.width * 5;
					word_arr[i].y = random(0, h);
					word_arr[i].size = ~~random(txt_min_size, txt_max_size);
				}
			}
			ctx.fill();
			window.requestAnimationFrame(draw);
		}
		saveText();
		draw();
	},
	watch: {},
	methods: {},
	components: {},
};
</script>

<style scoped lang="scss"></style>
